<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>04_元素类名操作</title>
		<!-- 元素类名操作  针对css中类名，可以做添加，移除，切换和包含类名操作
		     addclass()     有参【1个参，多个参】
						    功能；匹配元素集合中的所有元素添加一个类名或多个类名
			removeclass()   有参【1个参，多个参】
			                功能；从匹配元素集合中的所有元素移除一个类名或多个类名
			toggleclass()   功能:如果元素有指定类名则移除,没有则添加
			hasclass()      功能:检查匹配元素集合中是否存在指定类名,返回值boolean
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 .bg{
				 width: 300px;
				 height: 300px;
				 background: #f00;
			 }
			 .bd{
				 border: 10px solid yellow;
				 border-radius: 50%;
			 }
		 </style>
	</head>
	<body>
		<div id="targetElment"></div>
		<button id="addclassbtn">添加类名</button>
		<button id="removeclassbtn">移除类名</button>
		<button id="toggleclassbtn">切换类名</button>
		<button id="hasclassbtn">判断存在类名</button>
		<div id="resultArea"></div>
		<script>
		$("#addclassbtn").click(function(){
			$("#targetElment").addClass("bg bd");
			$("#resultArea").html("h4已经切换样式");
		});
		//3.切换类名   实现效果  点击切换类名 实现效果
		$("#toggleclassbtn").click(function(){
			$("#targetElment").addClass("bg");
			$("#resultArea").html("h4已经切换样式");
		});
		//4.样式全部移除,实现效果,实现效果
		$("#toggleclassbtn").click(function(){
			$("#targetElment").addClass("bg");
			$("#resultArea").html("h4已经切换样式");
		});
		//5.检查类名是否存在
		$("#hasclassbtn").click(function(){
			var hc=$("#targetElment").addClass("bg");
			$("#resultArea").html("目标元素 bg 类名是否存在:"+hc);
		});
		</script>
	</body>
</html>